//引入nodejs内置路径模块
const path = require("path")
//引入html插件
const HtmlWebpackPlugin = require("html-webpack-plugin")
//引入css插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
//引入压缩css插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
//引入js插件
const ParallelUglifyPlugin = require("webpack-parallel-uglify-plugin")

module.exports = {
    //入口
    entry:"./js/cart.js",
    //出口
    output:{
        //清除上一次的dist
        clean:true,
        //打包后的文件名
        filename:"cart.[contenthash:8].js",
        //打包后文件输出路径
        path: path.resolve(__dirname,"./dist")
    },
    //模式
    mode:"production",
    //实例化压缩css
    optimization:{
        minimizer:[new CssMinimizerPlugin()],
    },
    //在开发模式下追踪源码
    devtool:"inline-source-map",
    //插件配置
    plugins:[
        //实例化html-webpack-plugin插件
        new HtmlWebpackPlugin({
            //以哪个html为模板
            template:"./src/cart.html",
            //设置所有资源文件注入模板位置
            inject: "body",
        }),
        new MiniCssExtractPlugin({
            //打包后的文件名
            filename: "cart.[contenthash:8].css"
        }),
        //实例化 并行压缩输出js插件
        new ParallelUglifyPlugin({
            uglifyJS: {
              //输出配置
              output: {
                /* 设置是否输出可读性较强的代码 */
                beautify: false,
                /* 
                设置是否保留代码中的注释
                */
                comments: false,
              },
              //压缩配置
              compress: {
                /* 
              是否删除代码中所有的console语句
              */
                drop_console: true,
      
                /* 
                转换，去掉中间变量，
                */
                collapse_vars: true,
                /* 
               是否提取出现了多次，但没有定义变量去引用的静态值
               默认是不转换的，为了达到更好的压缩效果，我们一般设置为false
               */
                reduce_vars: false,
              },
            },
          }),
    ],
    module:{
        rules:[
            {
                //css
                test:/\.css$/i,
                use: [
                    //单独抽离样式
                    MiniCssExtractPlugin.loader,
                    //把css处理交给插件
                    "css-loader",
                ],
            },
        ],
    },
};